<template>
  <div class="person">
    <div class="header">
      <div class="publicIcon icon1" @click='$router.push("/message")'><img src="../../../public/images/message.png"/></div>
      <div class="publicIcon icon2" @click='$router.push("/setting")'><img src="../../../public/images/setting.png"/></div>

      <div class="personInfo">
        <img :src="info.userPhoto" class="pic l" v-if="info.userPhoto"/>
        <img src="../../../public/images/avtor.png" class="pic l" v-else/>
        <div class="txt l">
          <h1 class="hide_other">{{info.userName? info.userName : '暂未设置'}}</h1>
          <p class="hide_other">学号：{{info.campusCode? info.campusCode : '暂未设置'}}</p>
        </div>
        <div class="xinyong r">
          <img src='../../../public/images/qt_29.png'/>信用值&nbsp{{info.creditNum}}
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <ul class="typeList flex_between">
      <li @click='$router.push("/invitation")'><h2>{{info.totalPostCnt}}</h2><p>帖子</p></li>
      <li @click='$router.push("/myShop")'><h2>{{info.totalCommodityCnt}}</h2><p>商品</p></li>
      <li @click='$router.push("/concern")'><h2>{{info.totalFollowCnt}}</h2><p>关注</p></li>
      <li @click='$router.push("/fans")'><h2>{{info.totalFollowerCnt}}</h2><p>粉丝</p></li>
    </ul>
    <van-cell title="我的订单" icon="edit" is-link class="mt-20" @click='$router.push("/order")'>
      <span slot="icon" class="icons"><img src='../../../public/images/my_04.png'/></span>
    </van-cell>
    <van-cell title="我的评论" icon="edit" is-link @click='$router.push("/comments")'>
      <span slot="icon" class="icons"><img src='../../../public/images/my_07.png'/></span>
    </van-cell>
    <van-cell title="我的收藏" icon="edit" is-link @click='$router.push("/collect")'>
      <span slot="icon" class="icons"><img src='../../../public/images/my_09.png'/></span>
    </van-cell>
    <van-cell title="意见反馈" icon="edit" is-link class="mt-20" @click='$router.push("/suggestion")'>
      <span slot="icon" class="icons"><img src='../../../public/images/my_11.png'/></span>
    </van-cell>
    <mt-footer></mt-footer>
  </div>
</template>

<script>
import storage from '@/common/store'
export default {
  data(){
    return{
      info:{},
    }
  },
  created(){
    // console.log(storage.getItem('userInfo'))
    storage.getItem('userInfo')? this.info=storage.getItem('userInfo') : this.getMessage();
  },
  methods:{
    getMessage(){
      this.$get(this.$api.user.info,{userId:storage.getItem('userInfo').userId}).then(data=>{
        storage.setItem('userInfo',data.data);
        this.info=data.data;
        console.log(this.info);
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .person{background-color: #F5F5F5;padding-bottom: 50px;}
  .header{height: 4rem;background: url('../../../public/images/my_01.png') no-repeat;background-size: 100% 100%;position: relative;}
  .header .publicIcon{width: 0.44rem;height: 0.44rem;position:absolute;top: 0.4rem;}
  .header .publicIcon img{width: 100%;height: 100%;display: block;}
  .header .icon1{right: 1.26rem;}
  .header .icon2{right: 0.3rem;}
  .header .personInfo{padding: 1.8rem 0.3rem 0;}
  .header .personInfo .pic{width: 1.4rem;height: 1.4rem;display: block;border-radius: 50%;overflow: hidden;}
  .header .personInfo .txt{margin: 0.2rem 0 0 0.2rem;}
  .header .personInfo .txt h1{font: 0.4rem/0.5rem '微软雅黑';color: #FFFFFF;font-weight: bolder;width: calc(100vw - 0.6rem - 1.4rem - 3rem);}
  .header .personInfo .txt p{font: 0.24rem/0.5rem '微软雅黑';color: #FFFFFF;width: calc(100vw - 0.6rem - 1.4rem - 3rem);}
  .header .personInfo .xinyong{width: 2.34rem;height: 0.74rem;border-radius: 0.37rem;border: 0.02rem solid #fff;margin-top: 0.32rem;font: 0.3rem/0.76rem '微软雅黑';color: #FBFE16;background-color: rgba(74,172,233,0.5);}
  .header .personInfo .xinyong img{width:0.27rem;height:0.32rem;display: inline-block;margin: 0 0.22rem 0.05rem;}
  .typeList{padding: 0.52rem 0;background-color: #fff;text-align: center;}
  .typeList li{flex: 1;}
  .typeList  h2{font: 0.36rem/0.5rem '微软雅黑';color: #333;position: relative;font-weight: bold;}
  .typeList  li:nth-of-type(1) h2::before,.typeList  li:nth-of-type(2) h2::before,.typeList  li:nth-of-type(3) h2::before{content:'';position:absolute;top: 0.25rem;right: 0;width: 1px;height: 0.42rem;background-color:rgba(153,153,153,0.2); }
  .typeList  p{font: 0.24rem/0.4rem '微软雅黑';color: #999999;}

  .icons img{height: 0.42rem;margin-right: 0.25rem;}
</style>
